var TwinklGame = TwinklGame || {};

(function (TwinklGame, manifest) {


    //CHANGE FONT SIZE ------------------------------------------------------------------------------------------------------------------------

    var theWidth,
        minWidth = 1184,
        screenIsSmall = true,
        isFullscreen = false,

        fontArr = [
            {element:'.title-text', size_sm:'13vw', size_lg: '125px'},
            {element:'.font-button', size_sm:'4vw', size_lg: '58px'},
            {element:'.sub-heading', size_sm:'3vw', size_lg: '48px'},
            {element:'.jodal-title', size_sm:'5vw', size_lg: '65px'},
            {element:'.jodal-text', size_sm:'2.6vw', size_lg: '25px'},
            {element:'.text-button', size_sm:'3vw', size_lg: '35px'},
        ];

    function resizeScreen(){

        theWidth = $('body').width();
        var smallDisplay = true;

        theWidth >= minWidth && (smallDisplay = false);
        isFullscreen && (smallDisplay = true);

        if (smallDisplay != screenIsSmall) {
            screenIsSmall = !screenIsSmall;
            $.each(fontArr, function(key, value){
                var newSize = smallDisplay ? value.size_sm : value.size_lg;
                $(value.element).css('font-size', newSize);
            });
        }

        //ADD IN ANYTHING ELSE THAT NEEDS TO RESPOND DIFFERENTLY(CIRCLE BUTTONS ETC)
    }

    //AUDIO SAMPLES----------------------------------------------------------------------------------------------------------------------------------------------

    var buttonClickAudio = new Howl({src: [manifest.buttonClick.src]}),
        correctAnswerSoundAudio = new Howl({src: [manifest.correctAnswerSound.src]}),
        wrongAnswerAudio = new Howl({src: [manifest.wrongAnswerSound.src]}),
        swooshAudio = new Howl({src: [manifest.swoosh.src]}),
        clickAudio = new Howl({src: [manifest.click.src]});


    //------------------------------------------------------------------------------------------------------------------------------------------------------------

    TwinklGame.setup = function (config) {

        resizeScreen();

        $(window).resize(resizeScreen);
        $(window).resize(textResize);

        // VARIABLES-----------------------------------------------------------------------------------------------------------------------------------------------

        var wholeDocument = $("#gg_container"),
            foregroundCont = $(".foreground-container"),
            allPages = $(".pages"),
            titlePage = $("#titlePage"),
            instructionsPage = $("#instructionsPage"),
            mainPage = $("#mainPage"),
            soundToggle = $(".sound-toggle"),
            navBar = $(".go-nav-panel"),
            fullScreen = $("#fullscreen-button"),
            titleText = $("#title"),
            subHeading = $("#subContainer"),
            introTitle = $(".intro-title"),
            allInstructions = $(".allInstructions"),
            closeButton = $("#close-button"),
            letsGo = $("#lets-go-button"),
            playButton = $("#playButton"),
            instructionsPanel = $("#instructionsPanel");


        //SETUP BACKGROUND IMAGE & ALL TEXT------------------------------------------------------------------------------------------------------------------------

        wholeDocument.css({ "background-image": "url(" + config.background_image_url.assetUrl + ")" });
        foregroundCont.css({ "background-image": "url(" + config.foreground_image_url.assetUrl + ")" });
        wholeDocument.addClass('interactive-theme-' + config.theme_colour);
        titleText.html(config.title);  testFontSize(titleText,180); textResize();
        subHeading.text(config.sub_title);
        introTitle.text(config.intro_title);
        allInstructions.text(config.intro_text);
        $(".fit-me-button").text(config.lets_go_text);
        $("#playButton").text(config.play_button_text);
        $("#play-again").text(config.play_button_text);
        $("#next-question-button").text(config.next_button_text);

       
        closeButton.hide();

        //OPTIONAL ------ REMOVE IF NOT USING END GAME STATE-----------------------------------------------------------------------------------------------------------
        $("#isItCorrect").text(config.game_end_title);
        $("#congrats-screen-text").text(config.game_end_text);

        wholeDocument.addClass(config.branding+"-branding");

        if(config.branding =="twinkl"){
            $(".main-twinkl-logo").show();
        } else if(config.branding=="beyond"){
            wholeDocument.css('font-family', '"roboto" !important');
            $(".main-twinkl-logo").hide();
            $(".beyond-twinkl-logo").show();
        }




        hidePages();
        function hidePages(){
            allPages.hide();
            titlePage.show();
        }

        //ADD ANY ELEMENTS IN HERE YOU WANT TO REMOVE WIDOWS FROM---------------------------------------------------------------------------------------------------

        titleText.widowFix();


        //INSERT ANYTHING THAT NEEDS TO FIT TO CONTAINER------------------------------------------------------------------------------------------------------------

        function textResize(){
            testFontSize(titleText,180);
        }

        //START GAME------------------------------------------------------------------------------------------------------------------------------------------------

        letsGo.click(function(){
            swooshAudio.play();
            instructionsPage.show();
            instructionsPanel.css({'top':'100%'}).animate({'top':'15%'},500,"easeOutBack");
            titlePage.hide();
        });

        //PLAY BUTTON-----------------------------------------------------------------------------------------------------------------------------------------------

        playButton.click(function(){
            buttonClickAudio.play();
            instructionsPage.hide();
            mainPage.show();
            invertNav();
            textResize();
            createLevel()
            changeSize();

            fitAllText();
        });

        //INSERT GAME CODE HERE **************************************************************************************************************************************


        //todo
        //NOISES
        //CHECK ALL CONDITIONS
        //ADD DIRECTIONAL BUTTONs
        //BORDERS


        var level=0;


        if(config.desk_image_url && config.desk_image_url.assetUrl.length>0){
            $('.panel').css({ "background-image": "url(" + config.desk_image_url.assetUrl + ")" });

        }else{
            $('.panel').css({ "background-image": "url(" + manifest.desk.src + ")" });

        }


        var hastopExcess = false;

        var inPlaceCorrect;

        var amountToGet
        var bottomObj =[]
        var imageOnly
        var textOnly
        function createLevel(){

            hastopExcess = false;
            inPlaceCorrect =0;
            hastopExcess = false;
            amountToGet = config.levels[level].content.length
            bottomObj =[];
            $(".sequence-top").empty();
            $(".sequence-bottom").empty();


            if(config.levels[level].question_text && config.levels[level].question_text.length>0 ){
                $(".question-box").show();

                $(".question-box").find(".question-text-inner").text(config.levels[level].question_text)
                $(".panel").addClass("smaller-cont")

                TwinklGame.Utils.fitText($(".question-text-inner"),70)


            }else{
                $(".question-box").hide();

                $(".smaller-cont").removeClass("smaller-cont")

            }

            config.levels[level].content.forEach(function (e,index) {

                imageOnly ="";
                textOnly ="";


                var hasImage = returnImage(e)
                var hasTop = returnTop(e)
                var contToDrag ="<div class='sequence-item " +imageOnly + textOnly+ "' data-ans-id='"+index+"'>"+hasImage+"<div class='sequence-text' >"+e.label+"</div></div></div>"
                var contToTop ="<div class='sequence-wrapper'>"+hasTop+"<div class='sequence-item drop-area' data-ans-id='"+index+"'>"+e.number_text+"</div></div>"

                $(".sequence-top").append(contToTop)
                bottomObj.push(contToDrag)


                if(hasTop){
                   // alert("YOG")

                }else{
                    $(".sequence-top").addClass('no-info')

                }
                console.log(imageOnly,textOnly,"THINF")
            })

            TwinklGame.Utils.shuffleArray(bottomObj)

            bottomObj.forEach(function (e) {
                $(".sequence-bottom").append(e)
            })



            //addMovement();

            if(hastopExcess){
                $(".sequence-top").addClass('bigger-top-for')
                $(".sequence-bottom").addClass('bigger-bottom-for')

            }else{

                $(".bigger-top-for").removeClass('bigger-top-for')
                $(".bigger-bottom-for").removeClass('bigger-bottom-for')
            }
            detectScroll();
            changeSize()
            addDragAndDrop()




        }


        function changeSize(){



            if(config.set_item_width && config.set_item_width.length>0){

                $(".sequence-wrapper").css('width',config.set_item_width)

            }
            if(config.set_item_height && config.set_item_height.length>0){

                $(".sequence-wrapper").css('height',config.set_item_height)


            }


            var seqWidth = $('.sequence-top').find('.sequence-item').width();
            var seqHeight = $('.sequence-top').find('.sequence-item').height();



          detectScroll()

            $('.sequence-bottom >.sequence-item').css({'width':seqWidth+'px','height': seqHeight+'px'});


            //if timeline set size
            //set margin


            if(config.gap_between){
                $(".sequence-wrapper").css("margin","auto "+ config.gap_between)
            }
        }


        function fitAllText(){


            $(".sequence-text, .item-text").each(function () {
                TwinklGame.Utils.fitText($(this),70)
            })
        }

        var beingDragged

        function detectScroll(){
            $(".sequence-bottom").addClass('timeline-scrollable')
            $(".sequence-top").addClass('timeline-scrollable')
            if(config.scrollable && $('.sequence-top').get(0).scrollWidth> $('.sequence-top').get(0).offsetWidth ){

            }else{
                $(".sequence-bottom").removeClass('timeline-scrollable')
                $(".sequence-top").removeClass('timeline-scrollable')
            }

        }

        function addDragAndDrop() {


            $(".sequence-bottom").find('.sequence-item').draggable({

                helper: 'clone',
                appendTo: '.panel',
                delay: 0,

                start:function(event,ui){
                    $(this).addClass('ghost')

                    var getHeight = $(this).css('height')
                    var getWidth = $(this).css('width')


                    $('.sequence-item').css('z-index','0')
                    $(this).css('z-index','1000')

                  // $(ui.helper).css({"transform":"rotate(4deg)","transition":"transform 0.2s"})
                  // $(ui.helper).css('width',getWidth)
                  // $(ui.helper).css('height',getHeight)
                    $(ui.helper).css('z-index','1000')


                },
                stop:function(event,ui){
                    $(this).css({"transform":"rotate(0deg)"})
                   $('.ghost').removeClass('ghost')

                },
                drag: function(ev, ui) {
                    beingDragged = $(this).parent();
                    //$(this).css("z-index", a++);
                },
                revert: function(){

                    //$('.ghost').removeClass('ghost')

                    return true;
                },

            });


            var inPlaceCorrect =0;
            $(".sequence-top").find('.sequence-item').droppable({

                delay: 0,

                drop: function (ev, ui) {

                    var getIdea = $(this).attr("data-ans-id");
                    $(".movable-matching-card").removeClass("being-dragged-too")


                    if (getIdea === $(ui.draggable).attr("data-ans-id")) {
                        $('.ghost').removeClass('ghost')

                        inPlaceCorrect++
                        //correctAnswerSoundAudio.play();
                        $(ui.helper).remove();
                        $(ui.draggable).detach().css({top: 0, left: 0}).appendTo(this);
                        $(ui.draggable).siblings().detach().css({top: 0,left: 0}).appendTo(beingDragged);
                        //$(ui.draggable).draggable('disable');
                        //inPlace++;
                        $(this).parent().addClass("pulsate");
                        clickAudio.play();
                        $(ui.draggable).css({"transform":"rotate(0deg)", "transition":"none!important"})

                        //$(this).css({"transform":"rotate(0deg)", "transition":"none!important"})


                        if(inPlaceCorrect ===amountToGet){

                            if(config.levels.length>1){
                                setTimeout(function(){
                                    $(".round-result-screen").show();
                                    $("#instant-feedback-popup").css({'top': '100%'}).animate({'top': '15%'}, 500, "easeOutBack");
                                    $(".instant-feedback-title").text(config.levels[level].round_end_title)
                                    $(".instant-feedback-text").text(config.levels[level].round_end_text)
                                    //workOutRoundScore();
                                    swooshAudio.play();
                                },100)
    

                            }else{
                                
                                allPages.hide();
                                $('#well-done').show().css({'top':'100%'}).animate({'top':'15%'},500,"easeOutBack");


                            }

                           

                           // allPages.hide();
                        }

                    } else {

                        wrongAnswerAudio.play()

                        /*
                        if(totalQuestionScore>=2){
                           // totalQuestionScore--
                        }*/
                    }

        /*
                    if (inPlace === 4) {

                        setTimeout(function(){
                            $(".round-result-screen").show();
                            $("#instant-feedback-popup").css({'top': '100%'}).animate({'top': '15%'}, 500, "easeOutBack");
                            workOutRoundScore();
                            swooshAudio.play();
                        },100)


                    }*/
                }


            });







            $(".movable-matching-card").on("mousedown",function(e){
                var num = $(this).attr("data-id");
                var audio = search(num,usable);

                //MAKE CLICKED COME TO FRONT

                $(".movable-matching-card").parent().css({"z-index":"1"});
                $(this).parent().css({"z-index":"3"});

                if(audio){
                    var newAudio1 =  new Howl({src: audio});
                    newAudio1.play();
                }else{
                    buttonClickAudio.play();
                }
            })
        }




        $("#next-question-button").click(function(){
            $('.round-result-screen').hide();

            buttonClickAudio.play();
            level++;


            if(config.levels[level]){
                createLevel();
                fitAllText();

            }else{

                allPages.hide();
                $('#well-done').show().css({'top':'100%'}).animate({'top':'15%'},500,"easeOutBack");
            }
        })


        $("#play-again").click(function () {

            swooshAudio.play();
            level=0;
            createLevel();
            allPages.hide();
            $("#instructionsPage").show();
            $("#instructionsPanel").css({'top':'100%'}).animate({'top':'15%'},500,"easeOutBack");
            invertNav();
        })


        function returnImage(item){
            if(item.bottom_image && item.bottom_image.assetUrl.length>0){
                if(item.label){

                }else{
                    imageOnly="image-only"
                }
                return "<div class='item-image' style='background-image: url("+item.bottom_image.assetUrl+")'></div>"
            }else{
                if(item.label){
                    textOnly ="text-only";
                }
                return ""
            }

        }



        function returnTop(item){

           var hasTopText = returnTopText(item);




            if(item.top_image && item.top_image.assetUrl.length>0){
                hastopExcess=true;
                return "<div class='top-clue-cont'><div class='item-image' style='background-image: url("+item.bottom_image.assetUrl+")'></div>"+returnTopText(item)+"</div>"
            }else{

                if(returnTopText(item)){
                    hastopExcess=true;

                    return "<div class='top-clue-cont'><div class='item-text' >"+item.top_text+"</div></div>"
                }
                return ""
            }

        }


        function returnTopText(item){
            if(item.top_text && item.top_text.length>0){
                return "<div class='item-text' >"+item.top_text+"</div>"
            }else{
                return ""
            }
        }


        function addMovement(){

            $('.sequence-item').css
            $(".sequence-bottom").find('.sequence-item').draggable();
        }
































        //NAVIGATION FUNCTIONS ******************************************************************************************************************************************


        //CLOSE BUTTON

        closeButton.click(function(){
            buttonClickAudio.play();
            hidePages();
            invertNav();
            textResize();


            level=0;
            createLevel();
            allPages.hide();
            $("#titlePage").show();
            $(".round-result-screen").hide();
        });

        //INVERT THE NAVIGATION COLOURS AND TOGGLE CLOSE

        function invertNav(){
            fullScreen.toggleClass("inverted");
            soundToggle.toggleClass("inverted");
            navBar.toggleClass("theme-background-dark");
            closeButton.toggle();
        }

        //FULLSCREEN TOGGLE ---------------------------------------------------------------

        fullScreen.click(function () {
            buttonClickAudio.play();

            if(fullScreen.hasClass("expand-screen"))
            {fullScreen
                .removeClass("expand-screen")
                .addClass("reduce-screen");
                TwinklGame.Utils.makeFullScreen(document.getElementById('gg_container'));
            }
            else{
                fullScreen
                    .removeClass("reduce-screen")
                    .addClass("expand-screen");
                TwinklGame.Utils.leaveFullScreen();
            }
        });

        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function () {
            isFullscreen = !isFullscreen;
            resizeScreen();
            textResize();
            changeSize();

        });

        //SOUND TOGGLE -----------------------------------------------------------------------

        soundToggle.click(function () {
            buttonClickAudio.play();
            if(soundToggle.hasClass("sound-off"))
            {soundToggle
                .removeClass("sound-off")
                .addClass("sound-on");
                Howler.mute(true);

            }else{
                soundToggle
                    .removeClass("sound-on")
                    .addClass("sound-off");
                Howler.mute(false);
            }
        });

        //CHECK IF TEXT OVERFLOWS----------------------------------------------------------------

        function testFontSize(e, s) {

            e.css( "font-size", s + ("px"));

            var size = e.css('font-size'); //GETS FONT SIZE
            size = parseInt(size, 10); //REMOVE PX

            //WHILE TEXT OVERFLOWS ELEMENT REDUCE TEXT SIZE
            for(;e.get(0).offsetHeight<e.get(0).scrollHeight||e.get(0).offsetWidth<e.get(0).scrollWidth;)e.css("font-size","-=1");
        }

        resizeScreen();
        $('#preload-div').hide();
    };
})(TwinklGame, lib.manifest);